import 'package:ceramics/extensions/ab_widget_extensions.dart';
import 'package:ceramics/model/ab_coin.dart';
import 'package:ceramics/pages/main/mine/widgets/ab_coin_widget.dart';
import 'package:ceramics/styles/ab_styles.dart';
import 'package:ceramics/util/ab_api.dart';
import 'package:ceramics/util/ab_log_util.dart';
import 'package:ceramics/util/ab_store_kit.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class ABCoinShopController extends GetxController {

  var datas = <ABCoin>[].obs;

  @override
  void onInit() {
    super.onInit();
    loadData();
    LogPvManger.stat(page:'purchase');
  }

  loadData() async {
    datas.value = await api.searchGoods();
    update();
  }

  buy(ABCoin model) async {
    await ABStoreKit().purchaseProduct(model.code!);
  }
}

class ABCoinShopPage extends GetView<GetxController> {
  const ABCoinShopPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(title: const Text('Coin Shop')),
      body: Container(
        decoration: const BoxDecoration(
          image: DecorationImage(
            image: AssetImage("images/ceramics_39.webp"),
            fit: BoxFit.cover,
          ),
        ),
        child: GetBuilder<ABCoinShopController>(
          assignId: true,
          builder: (logic) {
            return SafeArea(
              child: ListView(
                children: [
                  const ABCoinWidget(),
                  Container(
                    color: Colors.white,
                    child: GridView.builder(
                      shrinkWrap: true,
                      physics: const NeverScrollableScrollPhysics(),
                      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2,
                        childAspectRatio: 0.9,
                      ),
                      itemCount: logic.datas.length,
                      itemBuilder: (ctx, idx) {
                        var model = logic.datas[idx];
                        return Stack(
                          children: [
                            Container(
                              margin: const EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                color: const Color(0xFFF6f6f6),
                                borderRadius: BorderRadius.circular(15),
                              ),
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Image.asset('images/ceramics_61.webp',scale: 3),
                                  10.toVerticalBox,
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(model.exchangeCoin.toString(),style: const TextStyle(fontWeight: FontWeight.bold,fontSize: 25,color: ABStyles.darkBlack)),
                                      if (model.price != model.originalPrice)
                                        Text('↓${(model.discount! * 100)}%',
                                            style: ABStyles.tsDarkPink15).paddingOnly(left: 8),
                                    ],
                                  ),
                                  20.toVerticalBox,
                                  Row(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(model.price.toString(),style: const TextStyle(fontWeight: FontWeight.bold,fontSize: 18,color: ABStyles.normalBlack)),
                                      if (model.price != model.originalPrice)
                                        Text(model.originalPrice.toString(),
                                            style: TextStyle(
                                                color: Colors.black.withOpacity(0.3),
                                                decoration: TextDecoration.lineThrough)).paddingOnly(left: 8),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                            if ((model.discount ?? 0) == 0.6)
                              Positioned(
                                top: 0,
                                right: 10,
                                child: Image.asset('images/ceramics_14.webp',scale: 3),
                              ),
                            if ((model.discount ?? 0) == 0.5)
                              Positioned(
                                top: 0,
                                right: 10,
                                child: Image.asset('images/ceramics_26.webp',scale: 3),
                              ),
                          ],
                        ).onTap(()=>logic.buy(model));
                      }),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}
